<!-- 主播列表 -->
<template>
      <div class="banner-main">
      <Banner />
    </div>
    <div class="recommended-main">
      <CardMain title="人气推荐" @tabsChange="tabsChange">
        <div class="recommended-list">
          <div class="recommended-item" @click="openDetail(item)" v-for="item in anchorList" :key="item.id">
            <div class="recommended-img">
              <van-image fit="cover" position="denter" :src="item.avatar" />
            </div>
            <div class="recommended-content">
              <h5>{{item.nickname}}</h5>
              <p v-html="item.introduction"></p>
            </div>
          </div>
        </div>
      </CardMain>
    </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import icon_hand3 from "@/assets/image/icon_hand3.png";

import { GetAnchor } from "@/api/index";

const route = useRoute();

const state = reactive({
  icon_hand3,
  goodsList: [],
  tabsList: [
    {
      id: 1,
      name: "首页",
    },
    {
      id: 2,
      name: "图库",
    },
    {
      id: 3,
      name: "实时",
    },
  ],
});

const { goodsList, tabsList } = toRefs(state);

const router = useRouter();

const GoToGoodsOrder = (index) => {
  let item = state.goodsList[index];
  router.push({
    path: "/goodsDetail",
    query: {
      goodId: item.anchorId,
    },
  });
};

let anchorList = ref([]);

const GetAnchorList = async (types=0) => {
  let params = {
    types
  }
  let { data } = await GetAnchor(params);
  anchorList.value = data
};

const tabsChange = (types) => {
  GetAnchorList(types)
}

const openDetail = (item) => {
  router.push({
    name:'activityDetail',
    query:{
      anchorId:item.id
    }
  })
}

onMounted(() => {
  GetAnchorList()
});
</script>



<style lang="scss" scoped>
.index-container {
  overflow: auto;
  padding-bottom: 80px;
  background: #f2f2f2;
  min-height: 100vh;
  box-sizing: content-box;
}

.banner-box {
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.van-image {
  width: 100%;
  height: 200px;
}

.recommended-list {
  padding-bottom: 5px;
}

.recommended-item {
  display: flex;
  padding: 0 15px;
  align-items: center;
  margin-bottom: 10px;

  h5 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 6px;
  }
  p{
    font-size: 14px;
    line-height: 1.2;
    color: #666;
  }
}

.recommended-img {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 10px;
  flex: none;

  .van-image {
    width: 88px;
    height: 88px;
  }
}
</style>
